<!--
 * @Author: Lzx
 * @Date: 2022-04-21 08:20:59
 * @LastEditors: Lzx
 * @LastEditTime: 2022-04-23 14:33:02
 * @FilePath: /web-vue/src/pages/Scenery/index.vue
 * @Description: 旅游景点首页
-->
<template>
  <div>
    <el-row class="data-table row-panel row-panel-first">
      <el-col>
        <el-card>
          <el-carousel indicator-position="outside" type="card">
            <el-carousel-item v-for="(item, index) in tableData" :key="index">
              <el-image
                :src="`${$store.state.API_ROOT}${item.sceneryImageUrl}`"
              ></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="data-table row-panel">
      <el-col>
        <el-card>
          <el-row :gutter="0">
            <!-- 【旅游景点】参数 -->
            <el-col>
              <el-form :model="queryForm" size="medium" :inline="true">
                <table
                  style="border-collapse: collapse; width: 100%"
                  class="table-common-style"
                >
                  <colgroup>
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                    <col width="11.11%" />
                  </colgroup>
                  <tbody>
                    <tr>
                      <td><div class="form-item-label">景点类型：</div></td>
                      <td colspan="2">
                        <el-form-item valign="middle" prop="sceneryType">
                          <el-select
                            v-model="queryForm.sceneryType"
                            filterable
                            clearable
                            placeholder="请选择查询参数"
                            @change="queryDataBtn()"
                          >
                            <el-option
                              v-for="item in $store.state.DICT
                                .sceneryTypeSelect"
                              :key="item.code"
                              :label="item.name"
                              :value="item.code"
                            >
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </td>
                      <td><div class="form-item-label">景点名称：</div></td>
                      <td colspan="2">
                        <el-form-item valign="middle" prop="name">
                          <el-input
                            v-model.trim="queryForm.name"
                            placeholder="请输入查询参数"
                            clearable
                          >
                          </el-input>
                        </el-form-item>
                      </td>
                      <td><div class="form-item-label">宣传标语：</div></td>
                      <td colspan="2">
                        <el-form-item valign="middle" prop="announceTitle">
                          <el-input
                            v-model.trim="queryForm.announceTitle"
                            placeholder="请输入查询参数"
                            clearable
                          >
                          </el-input>
                        </el-form-item>
                      </td>
                    </tr>
                    <tr>
                      <td><div class="form-item-label">景点状态：</div></td>
                      <td colspan="2">
                        <el-form-item valign="middle" prop="sceneryStatus">
                          <el-select
                            v-model="queryForm.sceneryStatus"
                            filterable
                            clearable
                            placeholder="请选择查询参数"
                            @change="queryDataBtn()"
                          >
                            <el-option
                              v-for="item in $store.state.DICT
                                .sceneryStatusSelect"
                              :key="item.code"
                              :label="item.name"
                              :value="item.code"
                            >
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="10">
                        <!-- 按钮 -->
                        <el-form-item>
                          <el-button
                            type="primary"
                            icon="el-icon-search"
                            @click="queryDataBtn()"
                            :loading="requestLoading"
                            >查询
                          </el-button>
                          <el-button
                            icon="el-icon-refresh-left"
                            @click="
                              () =>
                                Object.assign(
                                  this.queryForm,
                                  this.$options.data().queryForm
                                )
                            "
                            >清空查询条件
                          </el-button>
                        </el-form-item>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </el-form>
            </el-col>
            <!-- 【旅游景点】信息表 -->
            <el-col>
              <el-divider content-position="left">
                <h3>旅游景点</h3>
              </el-divider>

              <template v-for="(item, index) in tableData">
                <el-descriptions
                  :key="index"
                  class="margin-top"
                  :title="item.name"
                  :column="1"
                  :colon="false"
                  size="medium"
                >
                  <template slot="extra">
                    <el-button
                      class="button"
                      type="primary"
                      icon="el-icon-mobile-phone"
                      @click="
                        () =>
                          $router.push({
                            name: 'sceneryDetail',
                            params: {
                              obj: item,
                            },
                          })
                      "
                      >了解更多
                    </el-button>
                  </template>
                  <el-descriptions-item label="">
                    <el-image
                      :src="`${$store.state.API_ROOT}${item.sceneryImageUrl}`"
                      :preview-src-list="[
                        `${$store.state.API_ROOT}${item.sceneryImageUrl}`,
                      ]"
                      style="height: 180px"
                    ></el-image>
                  </el-descriptions-item>
                  <el-descriptions-item label="">
                    <template
                      v-for="(o, index) in $store.state.DICT
                        .sceneryStatusSelect"
                    >
                      <el-tag
                        v-if="o.code === item.sceneryStatus"
                        :key="index"
                        :type="o.theme"
                      >
                        {{ o.name }}
                      </el-tag>
                    </template>
                  </el-descriptions-item>
                  <el-descriptions-item label="">
                    <template
                      v-for="(o, index) in $store.state.DICT.sceneryTypeSelect"
                    >
                      <el-tag
                        v-if="o.code === item.sceneryType"
                        :key="index"
                        :type="o.theme"
                      >
                        {{ o.name }}
                      </el-tag>
                    </template>
                  </el-descriptions-item>
                  <el-descriptions-item label="">
                    <el-link type="warning" :underline="false">{{
                      item.announceTitle
                    }}</el-link>
                  </el-descriptions-item>
                </el-descriptions>
                <!-- 完美分割线 -->
                <el-divider :key="index">
                  <i class="el-icon-medal-1"></i>
                </el-divider>
              </template>
            </el-col>
            <!-- 分页组件 -->
            <el-col>
              <el-pagination
                background
                @size-change="handlePageSizeChange"
                @current-change="handleCurrentPageChange"
                :current-page="page.currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
                align="center"
              >
              </el-pagination>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "scenerySpotIndexPage",
  components: {},

  data() {
    return {
      // 分页参数
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      // 【旅游景点】数据表
      tableData: [],
      // 【旅游景点】表已选 IDs
      tableCheckIds: [],
      // 数据加载
      requestLoading: false,
      // 查询表单参数
      queryForm: {
        id: null,
        name: null,
        sceneryType: null,
        sceneryImageUrl: null,
        announceTitle: null,
        detailArticle: null,
        sceneryStatus: null,
      },
    };
  },

  // 组件创建时
  created() {
    // 页面元素初始化
  },

  // 组件挂载时
  mounted() {
    this.queryDataBtn();
  },

  methods: {
    // 表单提交后置处理
    afterSubmitHandle() {
      this.queryScenerySpotApi();
      this.tableCheckIds = [];
    },

    // 处理表格行多选
    handleTableRowsSelect(val) {
      let ids = [];
      val.forEach((obj) => ids.push(obj.id));
      this.tableCheckIds = ids;
    },

    // 处理表格行单选
    handleTableCurrentRowChange(row, oldRow) {},

    // ---------------- 分页参数处理 START-----------------
    handleCurrentPageChange(val) {
      this.page.currentPage = val;
      // 查询【旅游景点】表
      this.queryScenerySpotApi();
    },
    handlePageSizeChange(val) {
      this.page.pageSize = val;
      this.page.currentPage = 1;
      // 查询【旅游景点】表
      this.queryScenerySpotApi();
    },
    // ---------------- 分页参数处理 END-----------------

    // 查询【旅游景点】
    queryDataBtn() {
      this.page.currentPage = 1;
      this.queryScenerySpotApi();
    },

    // 查询参数处理
    queryParamProcess() {
      let param = Object.assign({}, this.queryForm);
      param["pageNum"] = this.page.currentPage;
      param["pageSize"] = this.page.pageSize;

      return param;
    },

    // 查询【旅游景点】API
    queryScenerySpotApi() {
      this.requestLoading = true;

      this.$api
        .queryScenerySpot(this.queryParamProcess())
        .then((res) => {
          this.tableData = [];
          this.page.total = 0;

          let { status, message, data } = res.data;
          if (status == 200) {
            this.tableData = data.items;
            this.page.total = data.totalNum;
          } else if (status == 403) {
            this.$message({
              message: `权限不足！${message}`,
              type: "error",
              center: true,
              duration: 1680,
            });
          } else {
            this.$alert(`暂无数据记录！${message}`, "【旅游景点】信息表", {
              type: "info",
              confirmButtonText: "确定",
              callback: (action) => {},
            });
          }

          this.requestLoading = false;
        })
        .catch((err) => {
          this.requestLoading = false;
          console.log(`【旅游景点】查询接口发生错误: ${err}`);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
// 表单布局样式
@import "@/assets/css/form-layout.scss";
</style>
